<template>
	<view class="diy">
		<view class="checkboxBox">
			<!-- 文字 -->
			<view class="text">
				请选择需要自主组卷的学科：
			</view>
			<view class="checkbox">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="item in checkboxList" :key="item.examCid"
						:label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			
		</view>
		<!-- 按钮 -->
		<view class="btnBox">
			<view class="btn" @click="goDiyExam">
				前往考试
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue: [],
				// 基本案列数据
				checkboxList: [{
						examCid:1,
						name: '数据结构',
						disabled: false
					},
					{
						examCid:2,
						name: '计算机组成原理',
						disabled: false
					},
					{
						examCid:3,
						name: '操作系统',
						disabled: false
					},
					{
						examCid:4,
						name: '计算机网络',
						disabled: false
					}
				],
			}

		},
		onLoad(e) {
			e.uid = this.uid;
		},
		methods: {
			checkboxChange(n) {
				
			},
			goDiyExam(){
				// console.log('change', this.checkboxValue);
				// let examName= this.checkboxValue.split(",");
				// console.log(examName);
				uni.showModal({
					title: "考试提醒",
					content: "考试将不会记录做题情况，一旦退出不可再次参加考试！答题会记录刷题数量。",
					success: (res => {
						try {
							if (res.confirm) {
								uni.navigateTo({
									url:"/pages/questionDetail/questionDetail?mode="+"diyExam"+ "&uid=" + this.uid+"&examName="+this.checkboxValue
								})
							}
						} catch (e) {
							//TODO handle the exception
							uni.showToast({
								title: "考试提醒拉！",
								icon: 'error'
							})
						}
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		box-sizing: border-box;
		
	}
	.checkboxBox{
		padding: 12rpx 24rpx;
		margin: 12rpx;
		.text{
			padding: 12rpx;
			color: #999;
			font-size: 32rpx;
			font-weight: bolder;
		}
		.checkbox{
			padding: 12rpx 24rpx;
		}
	}
	.btnBox{
		padding-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			padding: 12rpx;
			font-size: 38rpx;
			color: white;
			width: 50%;
			text-align: center;
			background-color: #3C9CFF;
			border-radius: 16rpx;
		}
		
	}
</style>